<template>
  <div>
<input type="text" v-model.trim="a" @keypress.enter="add">
<h2>正在进行({{zeng}})</h2>
<ul>
 <template v-for="(item,index) in list">
  <li :key="index" v-if="!item.done">
    <input type="checkbox" @click="changeDone(item)">
    <input  class="c"  v-if="index===c"   v-model="item.title" @blur="c =-1">
  <span v-else class="b" @click="c=index">{{item.title}}</span>
  <button @click="del(index)">删除</button>
  </li>
  </template>
</ul>

<h2>已完成({{jia}})</h2>
<ul>
 <template v-for="(item,index) in list">
  <li :key="index" v-if="item.done">
    <input type="checkbox" checked @click="changeDone(item)" >
  {{item.title}}
  <button @click="del(index)">删除</button>
  </li>
  </template>
</ul>



  </div>
</template>

<script>
export default {
       data(){
         return{
          a:'',
        list:[],
         c:-1,
         
          }
     },
computed: {
zeng(){
let list = this.list.filter(item=>{
  return !item.done
})
return list.length
},
jia(){
let list = this.list.filter(item=>{
  return item.done
})
return list.length
},
},
created(){
let todos = localStorage.todos
if(todos){
  this.list = JSON.parse(todos)
}
  },
    watch:{
// list(){
//   localStorage.todos = JSON.stringify(this.list)
// }
list: {
  handler(){
   localStorage.todos = JSON.stringify(this.list)
},
deep:true

           }
     },
methods:{
  add(){
 if(!this.a){
   return
 }
 this.list.push({
   title: this.a,
   done:false
    })
this.a = ''

  },
   del(index){
this.list.splice(index,1)
  },
changeDone(item){
item.done=!item.done


},

  }

}
 




</script>

<style scoped>
ul{

list-style:none;
margin:0;
padding:0;


}
li{

line-height:40px;
padding-left:20px;
margin:15px 0;

}
.b{
display:inline-block;
width:300px;
line-height:40px;
background-color:#eee;
cursor:pointer;
}
.c{
width:300px;
height:40px;

}
</style>